import { use } from 'echarts/core';
import { CustomChart, LineChart } from 'echarts/charts';
import { SVGRenderer } from 'echarts/renderers';
import { TooltipComponent, LegendComponent } from 'echarts/components';
import { MciEcharts } from '@/components/base/Echarts';
import { EChartsOption } from 'echarts';
import { grid, tooltip, xAxis, yAxisItem } from '@/components/business/Charts/options';
// import { getCSSColorV2 } from '@/utils/color-helper';
import { IGetFlowResultSummaryByMonthRes, getFlowResultSummaryByMonth } from '@/api';
// import { MciLabel } from '@/components/base';
import useCharts from '@/components/business/Charts/hooks/useCharts';

use([TooltipComponent, LegendComponent, LineChart, CustomChart, SVGRenderer]);

export default defineComponent({
  props: {
    flowId: {
      type: String,
      default: null
    }
  },
  setup(props) {
    const min = ref(0);
    const max = ref(1);
    const min2 = ref(0);
    const max2 = ref(1);
    const chartData = ref<any>([]);
    const { tooltipFormatter } = useCharts();
    const chartOption = computed(() => {
      return {
        grid: {
          ...grid,
          left: '4%'
        },
        tooltip: {
          ...tooltip,
          trigger: 'axis',
          formatter: tooltipFormatter
        },
        legend: {
          // data: ['滴灌额', '回收额'],
          icon: 'rect',
          itemWidth: 8,
          itemHeight: 2,
          textStyle: {
            // color: getCSSColorV2('text-4')
          }
        },
        // color: [getCSSColorV2('brand-5'), getCSSColorV2('danger-6')],

        xAxis: {
          ...xAxis,
          data: chartData.value.map((item) => `${item.month}`)
        },
        yAxis: [
          {
            ...yAxisItem,
            // min: min.value,
            // max: max.value,
            // interval: interval.value,
            type: 'value',
            name: '案件(件)',
            position: 'left',
            axisLine: {
              onZero: false
            }
          }
        ],
        series: [
          {
            yAxisIndex: 0,
            name: '进件数',
            type: 'line',
            smooth: true,
            data: chartData.value.map((item: any) => item.total)
          },
          {
            yAxisIndex: 0,
            name: '通过数',
            type: 'line',
            smooth: true,
            data: chartData.value.map((item: any) => item.pass)
          },
          {
            yAxisIndex: 0,
            name: '拒绝数',
            type: 'line',
            smooth: true,
            data: chartData.value.map((item: any) => item.reject)
          },
          {
            yAxisIndex: 0,
            name: '人工审核数',
            type: 'line',
            smooth: true,
            data: chartData.value.map((item: any) => item.manual)
          },
          {
            yAxisIndex: 0,
            name: '人工审核通过数',
            type: 'line',
            smooth: true,
            data: chartData.value.map((item: any) => item.manualPass)
          },
          {
            yAxisIndex: 0,
            name: '人工审核拒绝数',
            type: 'line',
            smooth: true,
            data: chartData.value.map((item: any) => item.manualReject)
          }
        ]
      } as EChartsOption;
    });

    chartData.value = [
      {
        month: '2023/11',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      },
      {
        month: '2023/12',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      },
      {
        month: '2024/1',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      },
      {
        month: '2024/2',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      },
      {
        month: '2024/3',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      },
      {
        month: '2024/4',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      },
      {
        month: '2024/5',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      },
      {
        month: '2024/6',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      },
      {
        month: '2024/7',
        all: 100,
        pass: 80,
        reject: 20,
        manualAll: 10,
        manualPass: 3,
        manualReject: 7
      }
    ];

    const initData = async (flowId: string) => {
      let data = await getFlowResultSummaryByMonth({ flowIds: flowId });
      chartData.value = data || [];
    };

    watch(
      () => props.flowId,
      (newFlowIds) => {
        if (newFlowIds) {
          initData(newFlowIds);
        }
      },
      { immediate: true, deep: true }
    );
    return () => (
      <div class="mt-24">
        <MciEcharts class="h-300" option={chartOption.value} />
      </div>
    );
  }
});
